<template>

    <footer class="footer brand-2">
        <div class="container">
            <div class="footer__wrapper">
                <div class="footer__top padding-top padding-bottom ">
                    <div class="row g-5">
                        <div class="col-xl-4 col-md-6">
                            <div class="footer__about">
                                <nuxt-link to="/" class="footer__about-logo"><img src="/images/logo/22.png"
                                        alt="Logo"></nuxt-link>
                                <p class="footer__about-moto">You minim mollit non deserunt ullamco est sit aliqua dolor
                                    do
                                    amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam
                                    consequat
                                    sunt nostrud amet.</p>
                            </div>
                        </div>
                        <div class="col-xl-2 col-md-6 col-sm-6">
                            <div class="footer__links">
                                <div class="footer__links-item">
                                    <div class="footer__links-tittle">
                                        <h6>Get In Touch</h6>
                                    </div>
                                    <div class="footer__links-content">
                                        <ul class="footer__linklist">
                                            <li class="footer__linklist-item"> <nuxt-link to="/contact">Contact
                                                    Us</nuxt-link>
                                            </li>
                                            <li class="footer__linklist-item"> <nuxt-link to="/about">About
                                                    Us</nuxt-link>
                                            </li>
                                            <li class="footer__linklist-item"> <nuxt-link to="/mentors">Mentors</nuxt-link>
                                            </li>
                                            <li class="footer__linklist-item"> <nuxt-link to="/mentor-details">Mentor
                                                    Details</nuxt-link> </li>
                                            <li class="footer__linklist-item"> <nuxt-link to="/blogs">Blogs</nuxt-link>
                                            </li>
                                            <li class="footer__linklist-item"> <nuxt-link to="/blog-details">Blog
                                                    Details</nuxt-link>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-xl-2 col-md-6 col-sm-6">
                            <div class="footer__links">
                                <div class="footer__links-tittle">
                                    <h6>Explore Links</h6>
                                </div>
                                <div class="footer__links-content">
                                    <ul class="footer__linklist">
                                        <li class="footer__linklist-item"> <nuxt-link to="/courses">Courses</nuxt-link>
                                        </li>
                                        <li class="footer__linklist-item"> <nuxt-link to="/about">About Us</nuxt-link>
                                        </li>
                                        <li class="footer__linklist-item"> <nuxt-link to="/course-details">Content
                                                Writing</nuxt-link> </li>
                                        <li class="footer__linklist-item"> <nuxt-link
                                                to="/course-details">Management</nuxt-link>
                                        </li>
                                        <li class="footer__linklist-item"> <nuxt-link to="/course-details">Web
                                                Development</nuxt-link>
                                        </li>
                                        <li class="footer__linklist-item"> <nuxt-link to="/course-details">Art &
                                                Design</nuxt-link>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </div>
                        <div class="col-xl-4 col-md-6">
                            <div class="footer__links">
                                <div class="footer__links-tittle">
                                    <h6>Information</h6>
                                </div>
                                <div class="footer__links-content">
                                    <ul class="footer__about-info">
                                        <li class="footer__about-item">
                                            <div class="footer__about-inner">
                                                <img src="/images/footer/1.svg" alt="icon">
                                                <div class="info">
                                                    <p class="m-0">4517 Washington Ave. Manchester, Kentucky
                                                        39495
                                                    </p>
                                                </div>
                                            </div>

                                        </li>
                                        <li class="footer__about-item">
                                            <div class="footer__about-inner">
                                                <img src="/images/footer/2.svg" alt="icon">
                                                <div class="info"> <nuxt-link
                                                        to="mailto:felicia.reid@example.com">felicia.reid@example.com</nuxt-link>
                                                    <br>
                                                    <nuxt-link
                                                        to="mailto:debra.holt@example.com">debra.holt@example.com</nuxt-link>
                                                </div>
                                            </div>
                                        </li>

                                        <li class="footer__about-item">
                                            <div class="footer__about-inner">
                                                <img src="/images/footer/3.svg" alt="icon">
                                                <div class="info"> <nuxt-link to="tel:+2075550119">(207)
                                                        555-0119</nuxt-link>
                                                    <br>
                                                    <nuxt-link to="tel:+7025550122">(702) 555-0122</nuxt-link>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                    <ul class="social mt-4">
                                        <li class="social__item">
                                            <nuxt-link to="javascript:void(0);"
                                                class="social__link social__link--rounded1"><i
                                                    class="fab fa-facebook-f"></i></nuxt-link>
                                        </li>
                                        <li class="social__item">
                                            <nuxt-link to="javascript:void(0);"
                                                class="social__link social__link--rounded1"><i
                                                    class="fab fa-instagram"></i></nuxt-link>
                                        </li>
                                        <li class="social__item">
                                            <nuxt-link to="javascript:void(0);"
                                                class="social__link social__link--rounded1"><i
                                                    class="fab fa-youtube"></i></nuxt-link>
                                        </li>
                                        <li class="social__item">
                                            <nuxt-link to="/signin" class="social__link social__link--rounded1"><i
                                                    class="fab fa-twitter"></i></nuxt-link>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="footer__bottom">
                    <div class="row">

                        <div class="col-lg-12">
                            <div class="footer__end">
                                <div class="footer__end-copyright">
                                    <p class=" mb-0">Copyright @ 2023 By <a class="text-white" href="https://themeforest.net/user/thetork/portfolio" target="_blank">TheTork</a>. All Right Reserved. </p>
                                </div>
                                <div>
                                    <ul class="footer__end-links">
                                        <li class="footer__end-item">
                                            <nuxt-link to="javascript:void(0);"> Terms & Conditions </nuxt-link>
                                        </li>
                                        <li class="footer__end-item">
                                            <nuxt-link to="javascript:void(0);"> Privacy Policy </nuxt-link>
                                        </li>
                                        <li class="footer__end-item">
                                            <nuxt-link to="javascript:void(0);"> Sitemap </nuxt-link>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
<teleport to="body">
    <transition name="scrolltop">
      <a v-if="scrollPosition > 300" class="scrollToTop scrollToTop--home2" href="javascript:void(0);" @click="scrollingTop">
        <i class="fa-solid fa-arrow-up-from-bracket"></i>
    </a>
</transition>

</teleport>


</template>

<script>
export default {
  data() {
    return {
      scrollPosition: 0
    }
  },
  created() {
    if (process.client) {
      window.addEventListener("scroll", this.handleScroll);
    }
  },
  destroyed() {
    if (process.client) {
      window.removeEventListener("scroll", this.handleScroll);
    }
  },
  methods: {
    handleScroll() {
      if (process.client) {
        this.scrollPosition = window.scrollY
      }
    },
    scrollingTop() {
      window.scrollTo(0, 0)
    }
  },
}
</script>
